<template>
    <div class="">
        <div class="top">
            <p>成员管理</p>
            <el-button type="info" @click="myReturn">返回</el-button>
        </div>
        <div class="bottom">
            <div class="title">添加成员</div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
                @submit.native.prevent label-position="right">
                <el-form-item label="成员账号" prop="userName">
                    <el-input v-model="ruleForm.userName"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="nickName">
                    <el-input v-model="ruleForm.nickName"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phonenumber">
                    <el-input v-model="ruleForm.phonenumber"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="ruleForm.email"></el-input>
                </el-form-item>
                <el-form-item label="角色" prop="roleId">
                    <el-select v-model="ruleForm.roleId" placeholder="请选择角色">
                        <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName"
                            :value="item.roleId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="登录密码" prop="password">
                    <el-input v-model="ruleForm.password" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass" autocomplete="off">
                    <el-input v-model="checkPass" type="password"></el-input>
                </el-form-item>
                <el-form-item label="备注信息" prop="remark">
                    <el-input type="textarea" v-model="ruleForm.remark"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">确认添加</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
    name: 'AddUser',
    data() {
        var checkRoleId = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('角色不能为空'));
            }
            callback();
        };
        var validatePass = (rule, value, callback) => {
            console.log(value);
            if (value === '') {
                return callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            console.log(value);
            if (value === '') {
                console.log(rule);
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                roleId: '',
                userName: '',
                nickName: '',
                phonenumber: '',
                email: "",
                password: '123',
                remark: ''
            },
            roleList: [],
            checkPass: '',
            rules: {
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { validator: validatePass, trigger: 'blur' }
                ],
                // checkPass: [
                //     { validator: validatePass2, trigger: 'blur' }
                // ],
                roleId: [
                    { required: true, validator: checkRoleId, trigger: 'blur' }
                ],
                // email: [
                //     { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                //     { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                // ],
                userName: [
                    { required: true, message: '请输入成员账号', trigger: 'blur' }
                ],
                // nickName: [
                //     { required: true, message: '请输入成员姓名', trigger: 'blur' },
                //     { min: 1, max: 5, message: '长度在 2 到 10个字符', trigger: 'blur' }
                // ],
                // phonenumber: [
                //     // { required: true, message: '手机号不能为空' },
                //     { type: 'number', message: '手机号必须为数字值' }, { min: 11, max: 11, message: '长度为11位', trigger: 'blur' }
                // ]
            }
        }
    },
    computed: {
    },
    mounted() {
        // console.log(this.menuList);
        this.RoleList().then(res => {//角色下拉框
            console.log(res);
            if (res.code == 200) {
                let arr = []
                res.data.forEach(item => {
                    let { roleId, roleName } = item
                    arr.push({ roleId, roleName })
                })
                this.roleList = arr
            }
        })


    },
    methods: {
        ...mapActions('permission', ['RoleList', 'Register']),
        submitForm(formName) {

            this.$refs[formName].validate((valid) => {//限制输入值
                console.log(valid);
                if (valid) {//输入值合法
                    let newUser = this.ruleForm
                    console.log(newUser);
                    this.Register(newUser).then(res => {
                        if (res.code == 200) {
                            this.$router.push({
                                path: '/home/Permission/MemberManage'
                            });
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                        }
                    })
                } else {
                    this.$message.error('请输入正确的信息');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        myReturn() {
            this.$router.push({
                path: '/home/Permission/MemberManage'
            });
        },
        setStart() {
            this.roleForm.statusA = this.roleForm.statusA == 0 ? 1 : 0
        }
    }
}
</script>

<style scoped>
.top {
    background-color: #f0f0f0;
    display: flex;
    width: 100%;
    height: 50px;
    align-items: center;
    padding-right: 50px;
    justify-content: space-between;
}

.top p {
    padding-left: 10px;
    margin-left: 20px;
    border-left: 6px solid #1CB09A;
    height: 26px;
    font-size: 18px;
    font-weight: 400;
}

.top>>>button {
    margin-right: 100px;
}

.bottom {
    width: 700px;
    height: 100%;
    padding: 50px;
    padding-top: 0;
    margin-left: 15%;
    margin-top: 30px;
    border: 2px solid #ccc;
    border-radius: 5px;
}

.title {
    background-color: #f0f0f0;
    display: flex;
    width: calc(100% + 100px);
    height: 50px;
    align-items: center;
    padding-right: 80px;
    justify-content: space-between;
    margin-bottom: 20px;
    margin-left: -50px;
    padding-left: 20px;
}
</style>